<template>
	<view class="content with-tabbar">
		<div v-if="!prePage" class="fontS48 lh-72 font-weight pl-30 pr-30 pt-42 pb-30 por-fixed bg-f7">教育经历</div>
		<div v-if="!prePage" class="h-124 bg-f7 w-p100"></div>
		<scroll-view class="pt-18 pb-18 pl-30 pr-30 bg-fff" style="white-space: normal;height: calc(100vh - 300upx);"
			scroll-y>
			<div class=" ">

				<div class="lh-70 flex align-center pb-15 bor-b resume-box pt-15">
					<div class="resume-title fontS28 color-3">学校</div>
					<div class="fontS28 color-0d0 resume-input">
						<input type="text" placeholder="学校" v-model="postForm.schoolName" />
					</div>
				</div>
				<picker mode="selector" @change="change($event, 'edu')" :value="education" :range="eduList"
					range-key="label" @confirm="confirm($event, 'edu')">
					<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15">
						<view class="form-label resume-title fontS28 color-3"> 学历 </view>
						<view class=" form-cnt">
							<div class="radio" :class="eduValue > -1 && eduValue !== null ? '' : 'color-80'">{{
								eduValue > -1 && eduValue !== null ? eduList[eduValue].label : '学历' }}
							</div>
						</view>
						<div class="ml-auto iconfont icon-youjiantou"></div>
					</view>
				</picker>

				<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15" @click="showmajor">
					<view class="form-label resume-title fontS28 color-3"> 所学专业 </view>
					<view class="form-cnt">
						<div class="radio" :class="majorName ? '' : 'color-80'">{{ majorName || '所学专业' }}</div>
					</view>
					<div class="ml-auto iconfont icon-youjiantou"></div>
				</view>
				<div class="lh-70 flex align-center pb-15 bor-b resume-box pt-15">
					<div class="resume-title fontS28 color-3">专业名称</div>
					<div class="fontS28 color-0d0 resume-input">
						<input type="text" placeholder="专业名称" v-model="postForm.customMajorName" />
					</div>
				</div>
				<div class="lh-70 flex align-center pb-15 bor-b resume-box pt-15" @click="showStudy">
					<div class="resume-title fontS28 color-3">就读时间</div>
					<div class="fontS28 color-0d0 resume-input" :class="minStudyDate ? '' : 'color-80'">
						{{ minStudyDate }}至{{ maxStudyDate }}
					</div>
				</div>
				<view class=" resume-box  pb-15 pt-15">
					<view class=" lh-70  flex align-center fontS28 color-3">
						<div>校内经历</div>
						<div class="ml-auto color-d">{{ postForm.schoolExperience.length }} /2000</div>
					</view>
					<view class="form-cnt1">
						<textarea name="" id="" placeholder="校内经历" v-model="postForm.schoolExperience"
							maxlength="2000"></textarea>
					</view>

				</view>

			</div>
		</scroll-view>
		<!-- 就读时间 -->
		<div class="profession-cover" v-if="studyStatus" @click="studyStatus = false"></div>
		<div v-if="studyStatus" class="profession-box">
			<div class="flex align-center pl-30 pr-30 lh-80 bor-b">
				<div @click="studyStatus = false">取消</div>
				<div class="color-green ml-auto" @click="studyStatus = false">确定</div>
			</div>
			<picker-view style="height:550upx;width:100%" @change="onColumnChange">
				<picker-view-column>
					<view style="height: 60upx;color:#000;line-height:60upx;text-align:center"
						v-for="(item, index) in minStudyList" :key="index">{{ item }}年</view>
				</picker-view-column>
				<picker-view-column>
					<view style="height: 60upx;color:#000;line-height:60upx;text-align:center"
						v-for="(item, index) in maxStudyList" :key="index">{{ item }}年</view>
				</picker-view-column>

			</picker-view>
		</div>

		<!-- 职业列表 -->
		<div class="profession-cover" v-if="majorStatus" @click="majorStatus = false"></div>
		<div class="profession-box flex" v-if="majorStatus">
			<div class="profession-left">
				<scroll-view style="height:600upx" scroll-y>
					<div v-for="(item, index) in majorList" :key="index" :class="majorIndex === index ? 'active' : ''"
						@click="changeTab(item, index)">
						{{ item.majorName }}
					</div>
				</scroll-view>
			</div>
			<div class="profession-right">
				<scroll-view style="height:600upx" scroll-y>
					<div v-for="(item, index) in majorList[majorIndex].children" :key="index" @click="selectItem(item)">
						{{ item.majorName }}
					</div>
				</scroll-view>
			</div>
		</div>
		<div class="bottom">
			<div v-if="prePage" class="submitBtn fontS26 " @click="toNext">保存
			</div>
			<div v-else class="submitBtn fontS26 " @click="toNext">下一步
			</div>


		</div>



	</view>
</template>

<script>
import { editResumeEducation, addResumeEducation, majorTree, onLineResume } from '@/api/resume'
const api = require("@/api/api.js").api;
export default {
	computed: {
		userInfo() {
			console.log(this.$store.getters.userInfo)
			return this.$store.getters.userInfo || {};
		},
	},
	data() {
		return {
			postForm: {
				customMajorName: '',//自定义专业名称
				education: '',//学历
				customMajorName: null,//自定义专业名称
				majorId: null,//专业Id
				majorTypeId: null,//专业分类Id
				maxStudyDate: '',//就读结束时间
				minStudyDate: '',//就读开始时间
				resumeId: null,//简历Id
				schoolExperience: '',//校内经历
				schoolName: '',//学校
				userId: '',//
			},
			minStudyList: [],
			maxStudyList: [],
			minStudyDate: '',
			maxStudyDate: '',
			value: '',
			majorName: '',
			eduList: getApp().globalData.education,
			education: null,
			eduValue: null,
			showEdu: false,

			majorList: [],
			majorIndex: 0,
			majorStatus: false,
			studyStatus: false,
			studyTime: null,
			prePage: '',
			flag: null
		}
	},
	onLoad(options) {
		let curYear = new Date().getFullYear()
		for (let i = 1979; i <= curYear; i++) {
			this.minStudyList.push(i)
			this.maxStudyList.push(i)
		}
		if (options.page) {
			this.prePage = options.page
			this.postForm.resumeId = options.resumeId
		}

		if (options.item && options.item !== null) {
			this.postForm = JSON.parse(options.item)
			console.log(this.postForm)
			this.majorName = this.postForm.majorName
			this.minStudyDate = this.postForm.minStudyDate
			this.maxStudyDate = this.postForm.maxStudyDate
			this.flag = options.flag
			this.eduValue = this.eduList.findIndex(item => { return item.value === this.postForm.education })
		}
		if (uni.getStorageSync('creat3Info')) {
			this.postForm = JSON.parse(uni.getStorageSync('creat3Info'))
			this.majorName = this.postForm.majorName
			this.minStudyDate = this.postForm.minStudyDate
			this.maxStudyDate = this.postForm.maxStudyDate
			this.flag = options.flag
			this.eduValue = this.eduList.findIndex(item => { return item.value === this.postForm.education })
		}


		// this.getonLineResume()
		this.getmajorTree()
	},
	methods: {
		async getonLineResume() {
			const { data } = await onLineResume()
			this.postForm.resumeId = data.id
			this.postForm.userId = data.userId

		},
		async getmajorTree() {
			const { data } = await majorTree()
			this.majorList = data
		},
		changeTab(item, index) {
			this.majorIndex = index
		},
		onColumnChange(e) {
			console.log(e)
			if (e.detail.value[1] !== 0) {
				if (e.detail.value[1] < e.detail.value[0]) {
					uni.showToast({
						title: '起始年份不能晚于结束年份',
						icon: 'none'
					})
				}
			}
			this.studyTime = e.detail.value
			this.postForm.minStudyDate = this.minStudyList[this.studyTime[0]]
			this.postForm.maxStudyDate = this.maxStudyList[this.studyTime[1]]
			this.minStudyDate = this.minStudyList[this.studyTime[0]]
			this.maxStudyDate = this.maxStudyList[this.studyTime[1]]
		},
		selectItem(item) {
			this.postForm.majorTypeId = item.pid
			this.postForm.majorId = item.id
			this.majorName = item.majorName
			this.majorStatus = false
		},
		change(e, type) {

			if (type === 'edu') {
				this.postForm.education = this.eduList[e.detail.value].value
				this.eduValue = e.detail.value

			}

		},
		confirm(e, type) {

			// if (type === 'edu' && e.value[0] === undefined) {
			// 	this.postForm.education = this.eduList[0][0].value
			// 	this.eduValue = 0

			// }
			this.postForm.education = 1
			this.eduValue = 0
			// this.showEdu = false
		},
		goIndustry() {
			uni.navigateTo({
				url: '/pages/index/industry?page=creat',
			});
		},
		showmajor() {
			this.majorStatus = true
		},
		showStudy() {
			this.studyStatus = true
		},
		async toNext() {
			if (!this.postForm.schoolName) {
				uni.showToast({ title: '请先输入学校', icon: 'none' });
				return false;
			}
			if (!this.postForm.education) {
				uni.showToast({ title: '请先选择学历', icon: 'none' });
				return false;
			}
			if (!this.postForm.majorId) {
				uni.showToast({ title: '请先选择专业', icon: 'none' });
				return false;
			}
			if (!this.postForm.customMajorName) {
				uni.showToast({ title: '请先输入自定义专业名称', icon: 'none' });
				return false;
			}
			if (!this.postForm.maxStudyDate || !this.postForm.minStudyDate) {
				uni.showToast({ title: '请先选择就读时间', icon: 'none' });
				return false;
			}
			if (!this.postForm.schoolExperience) {
				uni.showToast({ title: '请先输入校内经历', icon: 'none' });
				return false;
			}
			if (this.prePage) {
				const api = this.flag === 'edit' ? editResumeEducation : addResumeEducation
				const { data } = await api(this.postForm)
				uni.navigateBack({
					delta: 1
				})
			} else {

				uni.setStorageSync('creat3Info', JSON.stringify(this.postForm))
				uni.navigateTo({
					url: '/pages/resume/creat4'
				})
			}
			// const { data } = await resumeEducation(this.postForm)



		},

	}
}
</script>

<style lang="less" scoped>
.content {
	display: flex;
	flex-direction: column;

	padding: 20upx;
	// text-align: center;
	height: 100vh;
	overflow: hidden;
}

.title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}

.resume-box {
	.resume-title {
		width: 200upx;
	}

	.form-cnt {
		width: calc(100% - 240upx);

	}

	.form-cnt1 {
		width: 100%;

		textarea {
			width: 100%;
			line-height: 50upx;
			text-align: justify;
		}

	}

	.resume-input {
		width: calc(100% - 200upx);

		input {
			width: 100%;
			height: 50upx;
			line-height: 50upx;
		}
	}
}

.profession-cover {
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .3);
	z-index: 888888;
}

.profession-box {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 600upx;
	background: #F7F7F7;
	position: fixed;
	z-index: 999999;

	.profession-left {
		width: 50%;
		text-align: center;
		background: #fff;


		div {
			line-height: 90upx;

			&.active {
				background: #F7F7F7;
			}

		}
	}

	.profession-right {
		background: #F7F7F7;
		width: 50%;
		padding-left: 20upx;

		div {
			line-height: 90upx;

		}

	}
}

.bottom {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS>11.2*/
}

.color-0d0 {
	color: #0D0D12;
}
</style>